<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推荐服务</title>
    <link rel="shortcut icon" href="../img/favicon.png">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <script src="../js/jquery-1.12.4.js"></script>
<!-- Demo styles -->
<style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        background-color: rgb(179, 189, 196);
        transition: 1s background-color 1.3s;
    }
    .swiper-wrapper {
        transition-delay: 1s;
        transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .title {
        transition-delay: 1s;
        z-index: 10;
    }
    .title h3 {
        font-weight: 700;
        font-size: calc(55px + 54 * ((53vw + 53vh) - 520px) / 820);
        letter-spacing: -1px;
        color: rgba(255,255,255,0);
        -webkit-text-stroke: 2px #fff;
    }
    .img-box {
        width: 100%;
        height: 100%;
        position: absolute;
        transform: scale(0.6, 0.6);
        transition-duration: 1s;
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
        opacity: 0.9;
        overflow: hidden;
    }
    .img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.2, 1.2) translateX(50%);
        transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
        transition-property: transform;
    }
    .button-prev, .button-next {
        transition: 0.5s;
        outline: none;
        position: absolute;
        width: 140px;
        z-index: 10;
        top: 65vh;
        transform: translateY(-34px);
        cursor: pointer;
    }
    .button-prev {
        left: 4vw;
    }
    .button-next {
        right: 4vw;
    }
    .button.disabled {
        opacity: 0.2;
        cursor: default;
    }
    #arrow-svg-home {
        transform: translateY(353px);
    }
    .button-next #arrow-svg-home {
        transform: translateY(353px) rotateY(180deg);
        transform-origin: 80px 0px 0px;
    }
    svg {
        transition: 0.5s;
    }
    .cls-1 {
        transition: 0.5s;
        opacity: 0.4;
        transform-origin: -20px 40px;
        opacity: 1;
    }
    .cls-4 {
        transition: 0.5s;
        stroke-width: 2px;
        stroke: #fff;
        fill: none;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        opacity: 0.4;
        transform-origin: 0px 0px 0px;
    }
    #arrow-trg {
        transition: 0.5s;
        fill: #fff;
        transform: rotateY(180deg) translate(-53px, 39px);
    }
    #line {
        transition: 0.5s;
        stroke: #fff;
        transform: translate(50px, 42px);
    }
    .button-prev:not(.disabled):hover svg {
        transform: translateX(-25px);
    }
    .button-next:not(.disabled):hover svg {
        transform: translateX(25px);
    }
    .button:not(.disabled):hover .cls-1 {
        transform: scale(1.1);
    }
    .button:not(.disabled):hover .cls-4 {
        stroke-dasharray: 2px;
        stroke-dashoffset: 2px;
        opacity: 1;
    }
    .button:not(.disabled):hover #arrow-trg {
        transform: rotateY(180deg) translate(-37px, 39px);
    }
    .button:not(.disabled):hover #line {
        transform: translate(35px, 42px) scaleX(0.33);
    }
    </style>
    </head>
    <body>
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="title" data-swiper-parallax="-130%">
            <h3>Europe</h3>
          </div>
          <div class="img-box"><img src="../img/recommend1.jpg" style="transform:translateX(0);"></div>
        </div>
        <div class="swiper-slide">
          <div class="title" data-swiper-parallax="-130%">
            <h3>cutey</h3>
          </div>
          <div class="img-box"><img src="../img/recommend2.jpg"></div>
        </div>
        <div class="swiper-slide">
          <div class="title" data-swiper-parallax="-130%">
            <h3>Pure</h3>
          </div>
          <div class="img-box"><img src="../img/recommend3.jpg"></div>
        </div>
        <div class="swiper-slide">
            <div class="title" data-swiper-parallax="-130%">
              <h3>tempt</h3>
            </div>
            <div class="img-box"><img src="../img/recommend4.jpg"></div>
          </div>
      <div class="swiper-slide">
        <div class="title" data-swiper-parallax="-130%">
          <h3>literature</h3>
        </div>
        <div class="img-box"><img src="../img/recommend5.jpg"></div>
      </div>
      <div class="swiper-slide">
        <div class="title" data-swiper-parallax="-130%">
          <h3>fairy</h3>
        </div>
        <div class="img-box"><img src="../img/recommend6.jpg"></div>
      </div>
      <div class="swiper-slide">
        <div class="title" data-swiper-parallax="-130%">
          <h3>vitality</h3>
        </div>
        <div class="img-box"><img src="../img/recommend7.jpg"></div>
      </div>
  </div>
      <div class="button-prev button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
        <g id="arrow-svg-home">
          <g id="circ" class="cls-1">
            <circle cx="42" cy="42" r="40" class="cls-4"></circle>
          </g>
          <g id="arrow">
            <path id="arrow-trg" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"></path>
          </g>
          <path id="line" d="M120,0H0" class="cls-3" ></path>
        </g>
        </svg></div>
      <!--左箭头-->
      <div class="button-next button"> <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 350 160 90">
        <g id="arrow-svg-home">
          <g id="circ" class="cls-1">
            <circle  cx="42" cy="42" r="40" class="cls-4"></circle>
          </g>
          <g id="arrow">
            <path id="arrow-trg" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z" class="cls-2"></path>
          </g>
          <path id="line" d="M120,0H0" class="cls-3" ></path>
        </g>
        </svg></div>
      <!--右箭头--> 
    </div>
    
    <script src="../js/swiper.min.js"></script> 
    
    <script>
        //转载请标注版权 Swiper中文网 www.swiper.com.cn
        lock = false;
        bgColor = ["rgb(179, 189, 196)","rgb(180, 183, 166)","rgb(140, 152, 187)"]; //背景色
        var mySwiper = new Swiper('.swiper-container',{
               speed: 1300,
               allowTouchMove: false,//禁止触摸滑动
               parallax : true,  //文字位移视差
               on:{
                 transitionStart: function(){
                     lock = true;//锁住按钮
                      slides = this.slides
                     imgBox = slides.eq(this.previousIndex).find('.img-box') //图片包装器
                     imgPrev = slides.eq(this.previousIndex).find('img')  //当前图片
                     imgActive = slides.eq(this.activeIndex).find('img')  //下一张图片
                     derection = this.activeIndex-this.previousIndex
                     this.$el.css("background-color",bgColor[this.activeIndex]);//背景颜色动画
                     
                     imgBox.transform('matrix(0.6, 0, 0, 0.6, 0, 0)');
                     imgPrev.transition(1000).transform('matrix(1.2, 0, 0, 1.2, 0, 0)');//图片缩放视差
                     this.slides.eq(this.previousIndex).find('h3').transition(1000).css('color','rgba(255,255,255,0)');//文字透明动画
                     
                     imgPrev.transitionEnd(function () {
                       imgActive.transition(1300).transform('translate3d(0, 0, 0) matrix(1.2, 0, 0, 1.2, 0, 0)');//图片位移视差
                       imgPrev.transition(1300).transform('translate3d('+60*derection+'%, 0, 0)  matrix(1.2, 0, 0, 1.2, 0, 0)');
                     });
                 },
                 transitionEnd: function(){
                     this.slides.eq(this.activeIndex).find('.img-box').transform(' matrix(1, 0, 0, 1, 0, 0)');
                     imgActive = this.slides.eq(this.activeIndex).find('img')
                     imgActive.transition(1000).transform(' matrix(1, 0, 0, 1, 0, 0)');
                     this.slides.eq(this.activeIndex).find('h3').transition(1000).css('color','rgba(255,255,255,1)');
                     
                     imgActive.transitionEnd(function () {
                       lock = false
                     });
                     //第一个和最后一个，禁止按钮
                     if(this.activeIndex == 0){
                         this.$el.find('.button-prev').addClass('disabled');
                     }else{
                         this.$el.find('.button-prev').removeClass('disabled');
                     }
                     
                     if(this.activeIndex == this.slides.length - 1){
                         this.$el.find('.button-next').addClass('disabled');
                     }else{
                         this.$el.find('.button-next').removeClass('disabled');
                     }
                 },
                 init:function(){
                     this.emit('transitionEnd');//在初始化时触发一次transitionEnd事件
                   },
              
              }
            });
            
        //不使用自带的按钮组件，使用lock控制按钮锁定时间
        mySwiper.$el.find('.button-next').on('click',function(){
              if(!lock){
                mySwiper.slideNext();
              }
            })
        mySwiper.$el.find('.button-prev').on('click',function(){
              if(!lock){
                mySwiper.slidePrev();
              }
            })	
      </script>
      </body>
</html>